<!--
 * @Description: 商家销量
 * @Author: zhihong deng
 * @Date: 2021-05-26 00:11:15
 * @LastEditors: zhihong deng
 * @LastEditTime: 2021-07-24 23:31:08
-->
<template>
    <div class="com-container">
        <div class="com-chart" ref="seller_ref"></div>
    </div>
</template>

<script>
import { mapState } from 'vuex'
export default {
    data (){
        return{
            chartInstance: '',
            allData: '',
            currentPage: 1,
            totalPage: 0,
            timerId: '',
        }
    },
    computed: {
      ...mapState(['theme'])
    },
    watch: {
      theme () {
        this.chartInstance.dispose()
        this.initChart()
        this.screenAdapter()
        this.updateChart()
      }
    },
    methods: {
        // 初始化echartInstance对象
        initChart () {
            this.chartInstance = this.$echarts.init( this.$refs.seller_ref,this.theme );
            // 对图表初始化配置的控制
            const initOption = {
                title: {
                    text: '▍商家销售统计',
                    left: 20,
                    top: 20,
                },
                grid: {
                    top: '20%',
                    left: '3%',
                    right: '6%',
                    bottom: '3%',
                    containLabel: true,//包含文字部分
                },
                tooltip: {
                    trigger: 'axis',//在哪触发
                    axisPointer: {
                        type: 'line',
                        z: 0,
                        lineStyle: {
                            color: '#2D3443'
                        },
                    },
                },
                xAxis: {
                    type: 'value',
                },
                yAxis: {
                    type: 'category',
                },
                series: [
                    {
                        type: 'bar',
                        label: {
                            show: true,
                            position: 'right',
                            textStyle: {
                                color: 'white'
                            },
                        },
                        itemStyle: {
                            color: new this.$echarts.graphic.LinearGradient(0,0,1,0,[
                                // 0%状态下的颜色值
                                {
                                    offset: 0,
                                    color: '#5052EE',
                                },
                                // 100%状态下的颜色值
                                {
                                    offset: 1,
                                    color: '#AB6EE5'
                                }
                            ])
                        }
                    }
                ],
            };
            this.chartInstance.setOption(initOption);
            //鼠标移入清除定时器
            this.chartInstance.on('mouseover',() => {
                clearInterval(this.timerId);
            });
            //鼠标移出打开定时器
            this.chartInstance.on('mouseout',() => {
                this.startInterval;
            });
        },
        // 获取服务器的数据
        getData (ret) {
            // const { data: ret } = await this.$http.get('seller');
            this.allData = ret;
            console.log('ret',this.allData);
            // 对数据排序
            this.allData.sort((a,b) => {
                return a.value - b.value;
            });
            this.totalPage = this.allData.lenght % 5 === 0 ? this.allData.length / 5 : this.allData.length / 5 + 1;
            this.updateChart();
            this.startInterval();
        },
        // 更新图表
        updateChart () {
            const start = (this.currentPage - 1) * 5;
            const end = this.currentPage * 5;
            const showData = this.allData.slice(start,end);
            const sellerNames = showData.map(( item ) => {
                return item.name;
            })
            const sellerValues = showData.map(( item ) => {
                return item.value;
            })
            const dataOption = {                       
                yAxis: {
                    data: sellerNames,
                },
                series: [
                    {
                        data: sellerValues,
                    }
                ],
            }
            this.chartInstance.setOption(dataOption)
        },
        // 设置定时器
        startInterval () {
            if (this.timerId) {
                clearInterval(this.timerId);
            }
            this.timerId = setInterval (() => {
                this.currentPage++;
                if(this.currentPage >= this.totalPage){
                    this.currentPage = 1;
                }
                this.updateChart()
            },3000)
        },
        // 屏幕适配
        screenAdapter () {
            // this.$refs.seller_ref.offsetWidth;
            const titleFontSize = this.$refs.seller_ref.offsetWidth / 100 * 3.6;
            console.log('宽度',titleFontSize);
            const adapterOption = {
                title: {
                    textStyle: {
                        fontSize: titleFontSize,
                    },
                },
                tooltip: {
                    axisPointer: {
                        lineStyle: {
                            width: titleFontSize,
                        },
                    },
                },
                series: [
                    {
                        barWidth: titleFontSize,
                        itemStyle: {
                            barBorderRadius: [0,titleFontSize / 2,titleFontSize / 2,0],
                        }
                    }
                ],
            };
            this.chartInstance.setOption(adapterOption);
            this.chartInstance.resize();
        },
    },
    created () {
      this.$socket.registerCallBack('sellerData',this.getData)
    },
    mounted () {
        this.initChart();
        // this.getData();
        this.$socket.send({
          action: 'getData',
          socketType: 'sellerData',
          chartName: 'seller',
          value: ''
        })
        window.addEventListener('resize',this.screenAdapter);
        this.screenAdapter();
    },
    destroyed () {
        clearInterval(this.timerId);
        // 组件销毁的时候将监听器取消掉
        window.removeEventListener('resize',this.screenAdapter);
        this.$socket.unRegisterCallBack('sellerData')
    }
}
</script>

<style>

</style>